﻿<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
    <!--<![endif]-->

    <head>
        <meta charset="utf-8" />
        <title>SuperMgr前端框架</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta content="" name="description" />
        <meta content="" name="author" />
        <!--全局通用框架样式 begin-->
        <!-- 全局基本样式 -->

        <link href="../content/superui/min/css/superui.common.min.css" rel="stylesheet" />
        <!-- 全局主题样式 -->
        <link href="../content/superui/global/css/components.min.css" id="style_components" rel="stylesheet" />
        <link href="../content/superui/pages/layouts/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
        <!--全局通用框架样式 end-->
        <link href="../content/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet" />
        <!--<link href="../assets/global/plugins/typeahead/typeahead.css" rel="stylesheet" type="text/css" />
         -->    
    </head>
    <!-- END HEAD -->

    <body>
        <div class="page-container">
            <div class="page-content">
                <!-- END PAGE BAR -->
                <!-- BEGIN PAGE TITLE-->
                <h3 class="page-title"> Bootstrap Tags Input组件
                    <small></small>
                </h3>
                <!-- END PAGE TITLE-->
                <!-- END PAGE HEADER-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="note note-success">
                            <h3>Bootstrap Tags Input</h3>
                            <p>
                                <a href="http://timschlechter.github.io/bootstrap-tagsinput/examples/" target="_blank">官方文档</a>. </p>
                        </div>
                        <!-- BEGIN PORTLET-->
                        <div class="portlet light form-fit bordered">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="icon-social-dribbble font-green"></i>
                                    <span class="caption-subject font-green bold uppercase">Bootstrap Tags Input组件</span>
                                </div>
                                <div class="actions">
                                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                        <i class="icon-cloud-upload"></i>
                                    </a>
                                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                        <i class="icon-wrench"></i>
                                    </a>
                                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                                        <i class="icon-trash"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="portlet-body form">
                                <!-- BEGIN FORM-->
                                <form action="#" class="form-horizontal form-bordered ">
                                    <div class="form-body">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">基本样式</label>
                                            <div class="col-md-9">
                                                <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput"> </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">多值</label>
                                            <div class="col-md-9">
                                                <select multiple data-role="tagsinput">
                                                    <option value="虎哥">虎哥</option>
                                                    <option value="龙哥">龙哥</option>
                                                    <option value="豹哥">豹哥</option>
                                                    <option value="威哥">威哥</option>
                                                    <option value="田哥">田哥</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">标记</label>
                                            <div class="col-md-9">
                                                <input type="text" value="" id="object_tagsinput">
                                                <div class="margin-top-10">
                                                    <input type="text" class="form-control input-large" placeholder="Tag value" id="object_tagsinput_value"> </div>
                                                <div class="margin-top-10">
                                                    <select class="form-control input-large" id="object_tagsinput_continent">
                                                        <option value="美国">美国</option>
                                                        <option value="英国">英国</option>
                                                        <option value="德国">德国</option>
                                                        <option value="澳大利亚">澳大利亚</option>
                                                        <option value="非洲">非洲</option>
                                                        <option value="亚洲">亚洲</option>
                                                    </select>
                                                </div>
                                                <div class="margin-top-10">
                                                    <input type="text" class="form-control input-large" placeholder="国家" id="object_tagsinput_city"> </div>
                                                <div class="margin-top-10">
                                                    <a href="javascript:;" class="btn red" id="object_tagsinput_add">添加标记</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group last">
                                            <label class="control-label col-md-3">国家</label>
                                            <div class="col-md-9">
                                                <input type="text" value="" id="state_tagsinput">
                                                <div class="margin-top-10">
                                                    <input type="text" class="form-control input-large" placeholder="标记内容" id="state_tagsinput_value"> </div>
                                                <div class="margin-top-10">
                                                    <select class="form-control input-large" id="state_tagsinput_continent">
                                                        <option value="美国">美国</option>
                                                        <option value="英国">英国</option>
                                                        <option value="德国">德国</option>
                                                        <option value="澳大利亚">澳大利亚</option>
                                                        <option value="非洲">非洲</option>
                                                        <option value="亚洲">亚洲</option>
                                                    </select>
                                                </div>
                                                <div class="margin-top-10">
                                                    <input type="text" class="form-control input-large" placeholder="City" id="state_tagsinput_city"> </div>
                                                <div class="margin-top-10">
                                                    <a href="javascript:;" class="btn red" id="state_tagsinput_add">添加标记</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <div class="row">
                                            <div class="col-md-offset-3 col-md-9">
                                                <button type="button" class="btn green">
                                                    <i class="fa fa-check"></i> 确定</button>
                                                <button type="button" class="btn default">取消</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <!-- END FORM-->
                            </div>
                        </div>
                        <!-- END PORTLET-->
                    </div>
                </div>
            </div>
            <!-- END CONTENT BODY -->
        </div>
        <!--[if lt IE 9]>
    <script src="../content/superui/base/base-core/excanvas.min.js"></script>
    <script src="../content/superui/base/base-core/respond.min.js"></script>
<![endif]-->
        <!-- 全局公共类库Begin -->
        <script src="../content/superui/min/js/superui.common.min.js"></script>

        <script src="../content/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>

<script type="text/javascript">
    $(function () {
        handleDemo1();
        handleDemo2();
    });
    var handleDemo1 = function () {
        var elt = $('#object_tagsinput');

        elt.tagsinput({
            itemValue: 'value',
            itemText: 'text',
        });

        $('#object_tagsinput_add').on('click', function () {
            elt.tagsinput('add', {
                "value": $('#object_tagsinput_value').val(),
                "text": $('#object_tagsinput_city').val(),
                "continent": $('#object_tagsinput_continent').val()
            });
        });

        elt.tagsinput('add', { "value": 1, "text": "Amsterdam", "continent": "Europe" });
        elt.tagsinput('add', { "value": 4, "text": "Washington", "continent": "America" });
        elt.tagsinput('add', { "value": 7, "text": "Sydney", "continent": "Australia" });
        elt.tagsinput('add', { "value": 10, "text": "Beijing", "continent": "Asia" });
        elt.tagsinput('add', { "value": 13, "text": "Cairo", "continent": "Africa" });
    }
    
    var handleDemo2 = function () {

        var elt = $('#state_tagsinput');

        elt.tagsinput({
            tagClass: function (item) {
                switch (item.continent) {
                    case 'Europe':
                        return 'label label-primary';
                    case 'America':
                        return 'label label-danger label-important';
                    case 'Australia':
                        return 'label label-success';
                    case 'Africa':
                        return 'label label-default';
                    case 'Asia':
                        return 'label label-warning';
                }
            },
            itemValue: 'value',
            itemText: 'text'
        });

        $('#state_tagsinput_add').on('click', function () {
            elt.tagsinput('add', {
                "value": $('#state_tagsinput_value').val(),
                "text": $('#state_tagsinput_city').val(),
                "continent": $('#state_tagsinput_continent').val()
            });
        });

        elt.tagsinput('add', {
            "value": 1,
            "text": "Amsterdam",
            "continent": "Europe"
        });
        elt.tagsinput('add', {
            "value": 4,
            "text": "Washington",
            "continent": "America"
        });
        elt.tagsinput('add', {
            "value": 7,
            "text": "Sydney",
            "continent": "Australia"
        });
        elt.tagsinput('add', {
            "value": 10,
            "text": "Beijing",
            "continent": "Asia"
        });
        elt.tagsinput('add', {
            "value": 13,
            "text": "Cairo",
            "continent": "Africa"
        });
    }
</script>
    </body>

</html>